body{
    background-color: #004f8c;
background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
}
.text-light,h3 {
  font-size: 65px;
  margin-top: 3rem;
  line-height: 1;
  margin-bottom: 3rem;
  text-align: center;
  letter-spacing: 6px;
  color: #000;
  text-shadow: #000 4px 2px 2px;
  -webkit-text-stroke: 3px #baf1a1;
  font-family: "Playball", cursive;
}
h3{
    font-size: 35px;
}
#main {
  display: inline-block;
  text-align: center;
  width:100%
}
.wrap1,.wrap0,.wrap2,.wrap3,.wrap4,.wrap5,.wrap6,.wrap7,.wrap8,.wrap9,.wrap10,.wrap11,.wrap12,.wrap13,.wrap14,.wrap15,.wrap16 {
  width: 400px;
  height: 400px;
  margin: 5% 25px;
  background-color: red;
}
.box1,.box0,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10,.box11,.box12,.box13,.box14,.box15,.box16 {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 5% 25px;
  background: red;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
  background: #ddd;
  cursor: pointer;
  text-align: center;
  line-height: 130px;
  border: 4px solid #baf1a1;
}
.blue {
  background-color: rgba(56, 207, 248, 0.5);
  overflow: hidden;
}
.box0:hover {
  transform: scaleX(1.5);
  border: 4px solid #ff8474;
}
.box1:hover {
  transform: scaleY(1.5);
  border: 4px solid #ff8474;
}
.box2:hover {
  transform: scale(1.5, 1.5);
  border: 4px solid #ff8474;
}
.box3:hover {
  transform: translateX(1.5em);
  border: 4px solid #ff8474;
}
.box4:hover {
  transform: translateY(1.5em);
  border: 4px solid #ff8474;

}
.box5:hover {
  transform: translate(1.5em, 1.5em);
  border: 4px solid #ff8474;
}
.box6:hover {
  transform: matrix(1, -1, 0, 1, 0, 0); /* Standard syntax */
  border: 4px solid #ff8474;
}
.box7:hover {
  transform: rotate(270deg); /* Standard syntax */
  border: 4px solid #ff8474;
}
.box8:hover {
  transform: skew(30deg, 20deg);
  border: 4px solid #ff8474;
}
.box9:hover {
  transform: skewX(30deg);
  border: 4px solid #ff8474;
}
.box10:hover {
  transform: skewY(30deg);
  border: 4px solid #ff8474;
}
.box11:hover {
  transform: matrix3d( 0.8535533905932737,0.4999999999999999,0.14644660940672619,0,-0.4999999999999999,
    0.7071067811865476,0.4999999999999999,0,0.14644660940672619,-0.4999999999999999,0.8535533905932737,
    0,22.62994231491119,-20.3223304703363,101.3700576850888,1
  );
  border: 4px solid #ff8474;
}
.box11:hover {
  transform: translate3d(1px, 1px, 50px) rotate3d(3, 2, 2, 90deg);
  border: 4px solid #ff8474;
}
.box12:hover {
  transform: perspective(500px) scaleZ(2) rotateY(45deg);
  border: 4px solid #ff8474;
}
.box13:hover {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
  border: 4px solid #ff8474;
}
.box14:hover {
  transform: rotate3d(3, 2, 2, 90deg) translateZ(50px);
  border: 4px solid #ff8474;
}
